<template>
  <div class="app-container">
    <zhezhao :is-show="isShow" />
    <el-form ref="form" :model="form" label-width="130px" :inline="true">
      <el-row>
        <el-col :span="7">
          <el-form-item label="商品名称">
            <el-input v-model="form.keyword" placeholder=" 请输入商品名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="8" class="alignRight">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="toRoutes('plusVipAdd')">添加会员卡</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 卡片化的标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item,index) in tabList"
        :key="index"
        :label="item.label+ (upCard[index] ? upCard[index] : '')"
        :name="item.name"
      >
        <div v-if="item.name==activeName" v-loading="tableLoading" class="listDiv">
          <el-table ref="tableData" :data="tableData" style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="50" align="center" />
            <el-table-column prop="name" label="PLUS名称" align="center" />
            <el-table-column prop="sale_price" label="价格" align="center" />
            <el-table-column prop="created_at" label="添加时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.created_at | dateFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="check_status" label="审核状态" align="center">
              <template slot-scope="scope">
                <span
                  :class="scope.row.check_status==1?'col_ora':scope.row.check_status==2?'col_red':'col_gre'"
                >{{ scope.row.check_status | checkType }}</span>
                <i
                  v-if="scope.row.check_status == 2"
                  class="el-icon-warning"
                  @click="handleReason(scope.row.id,scope.row.check_msg)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="is_on" label="上架状态" align="center">
              <template
                v-if="scope.row.check_status==3"
                slot-scope="scope"
              >{{ scope.row.is_on | isOnType }}</template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="200px">
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.check_status==3">
                    <el-button
                      size="small"
                      type="text"
                      @click="toRoutes('plusVipInfo',scope.row.id)"
                    >查看</el-button>
                    <el-button
                      v-if="scope.row.is_on==0"
                      size="small"
                      type="text"
                      @click="toRoutes('plusVipEdit',scope.row.id)"
                    >编辑</el-button>
                    <el-button
                      v-if="scope.row.is_top==1&&scope.row.is_on == 1"
                      size="small"
                      type="text"
                      @click="handleTop(scope.row.id,0)"
                    >取消置顶</el-button>
                    <el-button
                      v-if="scope.row.is_top==0&&scope.row.is_on == 1"
                      size="small"
                      type="text"
                      @click="handleTop(scope.row.id,1)"
                    >置顶</el-button>
                    <el-button
                      v-if="scope.row.is_on == 0"
                      size="small"
                      type="text"
                      @click="handleShelves(scope.row.id,1)"
                    >立即上架</el-button>
                    <el-button
                      v-if="scope.row.is_on == 1"
                      size="small"
                      type="text"
                      @click="handleShelves(scope.row.id,0,scope.row.name)"
                    >立即下架</el-button>
                  </span>
                  <span v-if="scope.row.check_status==2">
                    <el-button
                      size="small"
                      type="text"
                      @click="toRoutes('plusVipInfo',scope.row.id)"
                    >查看</el-button>
                    <el-button
                      size="small"
                      type="text"
                      @click="toRoutes('plusVipEdit',scope.row.id)"
                    >修改</el-button>
                  </span>
                  <span v-if="scope.row.check_status==1">
                    <!-- @click="toRoutes('plusVipInfo',scope.row.id)" -->
                    <el-button
                      size="small"
                      type="text"
                      @click="toRoutes('plusVipInfo',scope.row.id,scope.row.check_status)"
                    >查看</el-button>
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagesCon">
            <div>
              <el-pagination
                :current-page="form.page"
                :page-sizes="page_sizes"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page_totals"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 上架弹窗 -->
    <el-dialog
      title="上架提示"
      :visible.sync="dialogUpVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <span>您的服务已经提交审核，审核通过后，系统自动上架</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 驳回理由 -->
    <!-- <el-dialog title="驳回理由" :visible.sync="dialogReasonVisible" width="30%">
            <span v-if="check_msg!=null && check_msg!=''">{{ check_msg }}</span>
            <span v-else>暂无</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="modify">重新修改</el-button>
            </span>
        </el-dialog>-->
    <!-- 置顶 -->
    <el-dialog title="置顶提示" :visible.sync="dialogTopVisible" width="30%">
      <span>PLUS会员卡置顶已达2张上限，请取消置顶后在操作</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="topSubmit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import zhezhao from '@/components/CreateMask/index'
import { showButton, getList, isOn, isOnTop } from '@/api/plusVipList'
export default {
  name: 'PlusVipList',
  components: { zhezhao },
  filters: {
    // 审核
    checkType(e) {
      switch (e) {
        case 1:
          return '审核中'
          break
        case 2:
          return '驳回'
          break
        case 3:
          return '审核通过'
          break
        default:
          // return "暂无";
          break
      }
    },
    // 上架
    isOnType(e) {
      switch (e) {
        case 0:
          return '已下架'
          break
        case 1:
          return '已上架'
          break
        default:
          // return "暂无";
          break
      }
    },
    // 时间戳转化
    dateFilter(e) {
      if (e != 0) {
        return new Date(Number(e) * 1000).format('yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      activeName: 'all',
      form: {
        page: 1,
        size: 10,
        type: '',
        keyword: ''
      },
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 60, // 总条目数
      tableData: [],
      isShow: true,
      // isShow: false,
      dialogVisible: false, // 下架
      buttonList: [],
      dialogReasonVisible: false, // 驳回理由
      isOnStatus: '',
      dialogUpVisible: false, // 上架
      dialogTopVisible: false, // 置顶
      isTopStatus: '',
      check_msg: '', // 驳回理由
      shop_name: '', // 店铺名称
      modifyId: '', // 重新修改id
      upCard: [],
      tabList: [
        { label: '全部', name: 'all' },
        { label: '上架会员卡', name: 'upCards' },
        { label: '下架会员卡', name: 'downCards' },
        { label: '审核中会员卡', name: 'checkCards' },
        { label: '驳回会员卡', name: 'rejectCards' }
      ], // tab栏
      tableLoading: true,
      arr: [] // 保存is_top置顶个数
    }
  },
  inject: ['reload'],
  mounted() {
    this.getSource()
    this.getList(this.form)
  },
  methods: {
    // 路由跳转
    toRoutes(e, id, check_status) {
      const route = {
        name: e,
        query: { id: id, check_status: check_status }
      }
      this.$router.push(route)
    },
    // 列表
    getList(e) {
      getList(e)
        .then(res => {
          // console.log(888, res)
          if (res.data.code == 200) {
            const resData = res.data.data
            this.page_totals = res.data.meta.total
            if (this.activeName == 'upCards') {
              this.upCard[1] = res.data.meta.total
            }
            if (this.activeName == 'downCards') {
              this.upCard[2] = res.data.meta.total
            }
            if (this.activeName == 'checkCards') {
              this.upCard[3] = res.data.meta.total
            }
            if (this.activeName == 'rejectCards') {
              this.upCard[4] = res.data.meta.total
            }
            this.tableData = resData
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
          this.tableLoading = false
        })
        .catch(err => {
          this.errorStatus(err.msg)
          this.tableLoading = false
        })
    },
    // tab标签页
    handleClick(tab) {
      this.form.page = 1
      this.form.type = ''
      switch (tab.name) {
        case 'all': // 全部
          this.getList()
          break
        case 'upCards': // 上架会员卡
          this.form.type = 1
          this.getList(this.form)
          break
        case 'downCards': // 上架会员卡
          this.form.type = 2
          this.getList(this.form)
          break
        case 'checkCards': // 审核中会员卡
          this.form.type = 3
          this.getList(this.form)
          break
        case 'rejectCards': // 驳回会员卡
          this.form.type = 4
          this.getList(this.form)
          break
        default:
          break
      }
    },
    // 立即下架
    handleShelves(id, opt, e) {
      const datas = { id, opt }
      if (opt == 0) {
        // 下架
        this.$confirm('您正在下架' + e + 'PLUS会员卡?', '下架提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.changeStatus(datas)
            this.$message({
              type: 'success',
              message: '状态修改成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      } else if (opt == 1) {
        // 上架
        this.$confirm(
          '您的服务已经提交审核，审核通过后，系统自动上架',
          '上架提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            this.changeStatus(datas)
            this.$message({
              type: 'success',
              message: '状态修改成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    },
    // handleShelves(id, opt, e) {
    //     const datas = { id, opt };
    //     if (opt == 0) {
    //         // 下架
    //         this.dialogVisible = true;
    //         this.shop_name = e;
    //         this.isOnStatus = datas;
    //     } else if (opt == 1) {
    //         // 上架
    //         this.dialogUpVisible = true;
    //         this.isOnStatus = datas;
    //     }
    // },
    // 置顶
    handleTop(id, opt) {
      const datas = { id, opt }
      //   if (opt == 1) {
      //     if (this.arr.length > 2) {
      //       this.dialogTopVisible = true
      //       this.isTopStatus = datas
      //     } else {
      //       this.isTop(datas)
      //     }
      //     console.log(999, this.arr)
      //   } else if (opt == 0) {
      //     this.isTop(datas)
      //   }
      this.isTop(datas)
    },
    isTop(e) {
      isOnTop(e)
        .then(res => {
          if (res.data.code == 200) {
            // console.log(res)
            this.reload()
            this.succStatus('状态修改成功')
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 置顶确认
    topSubmit() {
      this.dialogTopVisible = false
      this.isTop(this.isTopStatus)
    },
    // 上架弹窗确认
    submitUpFn() {
      this.dialogUpVisible = false
      this.changeStatus(this.isOnStatus)
    },
    // 查询
    handleSearch() {
      this.form.page = 1
      this.getList(this.form)
    },
    // 弹窗驳回理由
    handleReason(e, msg) {
      if (!msg) {
        msg = '暂无'
      }
      this.$confirm(msg, '驳回理由', {
        confirmButtonText: '重新修改',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$router.push({
            path: 'plusVipEdit',
            query: { id: e }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 驳回
    // handleReason(e, msg) {
    //     this.dialogReasonVisible = true;
    //     this.modifyId = e;
    //     this.check_msg = msg;
    // },
    // modify() {
    //     this.dialogReasonVisible = false;
    //     this.$router.push({
    //         path: "plusVipEdit",
    //         query: { id: this.modifyId }
    //     });
    // },
    // 弹窗确定
    // submitFn() {
    //     this.dialogVisible = false;
    //     this.changeStatus(this.isOnStatus);
    // },
    // 修改状态
    changeStatus(e) {
      isOn(e)
        .then(res => {
          if (res.data.code == 200) {
            // console.log(res)
            this.reload()
            this.succStatus('状态修改成功')
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 每页显示条数
    handleSizeChange(val) {
      this.form.size = val
      this.getList(this.form)
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.page = val
      this.getList(this.form)
    },
    getSource() {
      const source = sessionStorage.getItem('source')
      const status = sessionStorage.getItem('check_status')
      if (status == 3) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, 'success')
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    }
  }
}
</script>
<style scoped>
.app-container {
    padding: 20px !important;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.alignRight {
    text-align: right;
    padding-bottom: 20px;
}
.el-table th > .cell {
    text-align: center !important;
}
.col_ora {
    color: orange;
}
.col_gre {
    color: green;
}
.col_red {
    color: red;
}
</style>
